<template>
  <div class="i-layout-goods">
    <ScreenBase v-if="select" :config="select" type="first" :fieldKey="fieldKey" />
    <hr v-if="select" class="i-line">
    <el-alert  v-if="tips" :title="tips.title" type="info" :description="tips.body" show-icon></el-alert>
    <TableAction v-if="config.action" :data="config.action" v-model="selectData"  class="i-action"/>
    <TableBase :config="table" :fieldKey="fieldKey" :init="set_url" v-model="selectData"/>
    <div v-if="page">
      <el-pagination @current-change="changePage" :current-page="current[fieldKey]" :page-size="size[fieldKey]" layout="total, prev, pager, next, jumper" :total="total[fieldKey]"></el-pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
import ScreenBase from '@/components/ScreenBase'
import FormBase from '@/components/FormBase'
import TableBase from './TableBase'
import DConfig from './config.js'
import TableAction from './TableAction';

//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')

//import { get_order_all } from '@/api/order'

export default {
  props: {
    value: [Array, Object],
    config:{
      type:[Array,Object],
      default:DConfig
    }
  },
  components: {
    ScreenBase,
    FormBase,
    TableBase,
    TableAction
  },
  provide(){
    return {
      field_key:this.fieldKey,
      model:this.config.model,
      selection:this.config.selection
    }
  },
  data() {
    return {
      tips: this.config.tips,
      select: this.config.select,
      table: this.config.table,
      page: this.config.page,
      set_url: this.config.set_url,

      /**
       * 开启多选时，选中数据
       * @type {Array}
       */
      selectData:[],

      // 组件生成唯一码
      fieldKey: 'xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random() * 16 | 0,
              v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
      }),
                                  
    }
  },

  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['total','size','current'])
  },

  mounted() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  created() {
    /**
     * 当有分页配置,执行分页设置
     * @param  {[type]} this.page [description]
     * @return {[type]}           [description]
     */
    if(this.page){
      this.setSize({key:this.fieldKey,value:this.page.size});
      this.setCurrent({key:this.fieldKey,value:this.page.current});
      this.setPage(this.fieldKey);
      this.setTotal({key:this.fieldKey,value:this.page.total})
    }
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['setCurrent','setSize','setPage','setTotal']),
    ...mapActions(['onCurrentChange']),
    changePage(num) {
      this.onCurrentChange({ key: this.fieldKey, data: num })
    }

  }
}

</script>
<style type="text/css" lang="scss">
.i-layout-goods {
  padding-top: 10px;
  padding-bottom: 10px;
  .el-table {
    margin-top: 10px;
    margin-bottom: 20px;
    .i-table-input .el-input__inner{
      height:100%;
      border-color:rgba(0,0,0,0);
      background-color:rgba(0,0,0,0);
      padding:0px;
      height: 32px;
      line-height: 32px;
    }
    .i-input-light .el-input__inner{
      border:solid 1px #DCDFE6;
    }

  }

  .el-table th>.cell{
    display: flex;
    align-items: center;
    .i-head-tips, .i-head-tips > div{
      padding: 0px;
      display: flex;
      align-items: center;
      ._tips-under{
        line-height: 24px;
        border-bottom: dotted 1px #aaa;
        max-width: 200px;
      }
    }
  }

  .box-card {
    margin: 20px;
  }

  .el-form-item {
    margin-bottom: 5px;
  }

  .i-action{
    margin: 10px;
    text-align: right;
  }

  .i-line {
    border: 1px ridge;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}

</style>
